//
//  LandMarkDetail.swift
//  SwiftUIDemo2
//
//  Created by hulinhu on 2020/7/4.
//  Copyright © 2020 koudai. All rights reserved.
//

import SwiftUI
import MapKit


struct LandMarkDetail: View {
    var landmark : Landmark
    
    var body: some View {
        VStack.init {
            MapView(coordinate: landmark.locationCoordinate).frame(height: 300)
            CircleImage(image: landmark.image(forSize: 250))
                .offset(y: -130)
                .padding(.bottom, -130)
            VStack(alignment: .leading) {
                Text(landmark.name)
                    .font(.title)
                HStack {
                    Text(landmark.park)
                        .font(.subheadline)
                    Spacer()
                    Text(landmark.state)
                        .font(.subheadline)
                }
            }
            .padding()
            Spacer()
        }
    }
}

struct LandMarkDetail_Previews: PreviewProvider {
    static var previews: some View {
        LandMarkDetail(landmark: landmarkData[0])
    }
}

/// CircleImage
struct CircleImage : View {
    var image: Image
    var body: some View {
        image
            .clipShape(Circle())
            .overlay(
                Circle().stroke(Color.white, lineWidth: 4)
                    .shadow(radius: 10)
        )
    }
}

struct CircleImage_Previews : PreviewProvider {
    static var previews: some View {
        CircleImage(image: Image( "turtlerock"))
    }
}


/// MapView
struct MapView : UIViewRepresentable { // 引入其他协议
    var coordinate: CLLocationCoordinate2D
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }
    
    func updateUIView(_ view: MKMapView, context: Context) {
        let span = MKCoordinateSpan(latitudeDelta: 0.02, longitudeDelta: 0.02)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        view.setRegion(region, animated: true)
    }
}

struct MapView_Previews : PreviewProvider {
    static var previews: some View {
        MapView(coordinate: landmarkData[0].locationCoordinate)
    }
}
